import { Button, Form, Input } from 'antd'
import { useState } from 'react'

import { useChatStore } from '@/store/ChatStore'

const ChatAction = () => {
  const [roleId, setRoleId] = useState<string>('1')
  const [msgId, setMsgId] = useState(1)
  const { addMessage } = useChatStore()

  const [form] = Form.useForm()

  const changeRole = () => {
    setRoleId(r => (r === '1' ? '2' : '1'))
  }

  const onFinish = values => {
    const message = values.message
    form.resetFields()
    addMessage({
      msgId,
      roleId,
      text: message,
    })
    setMsgId(id => id + 1)
  }

  return (
    <div className="ml-20">
      <Button onClick={changeRole}>change role</Button>
      <Form onFinish={onFinish} className="mt-10" form={form}>
        <Form.Item
          name="message"
          rules={[{ required: true, message: 'Please input message!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            发送
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default ChatAction
